<template>
	<view class="L-main">
		<uni-nav-bar left-icon="back" color="#fff" v-model="keyword" background-color="#5498ff" @clickLeft="$goBack">
			<view>搜索</view>
		</uni-nav-bar>
		<view class="search">
			<view class="search_box">
				<icon type="search" size="18" />
				<input type="text" placeholder="搜索需要办理得事项名称" v-model.trim="keyword" placeholder-style="font-size:26rpx"
					@input="search" />
			</view>
			<view class="cancel" @click="cancel">取消</view>
		</view>
		<view class="list">
			<scroll-view style="height: 100%;" scroll-y>
				<view class="list_box">
					<view class="recommend" v-if="isEmpty && list.item.length == 0">
						<view class="title">
							<text>为你推荐</text>
							<text @click="change">换一批</text>
						</view>
						<view class="recommend_list">
							<view v-for="(item,index) in recommendList" :key="index" @click="recommend(item.itemCode)">
								{{ item.itemName }}
							</view>
						</view>
					</view>

					<!-- 	<block v-for="(item,index) in list" :key="index"> -->
					<view class="text" v-for="(items,indexs) in list.item" :key="indexs" @click="toDetail(items)">
						<u-parse :html="items.name"></u-parse>
					</view>
					<!-- </block> -->

					<view class="noData" v-if="!isEmpty && list.item.length == 0">
						<image src="../../static/img_nodata.png"></image>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import uniNavBar from '@/uni-ui/libs/uni-nav-bar/uni-nav-bar.vue';
	import {
		_throttle
	} from '@/common/js/fns.js';
	export default {
		components: {
			uniNavBar
		},
		computed: {
			isEmpty() {
				if (/^\s*$/.test(this.keyword)) {
					return true
				} else {
					return false
				}
			}
		},
		data() {
			return {
				keyword: '',
				recommendList: [],
				list: {
					byNewsToTitle: [],
					item: [],
					lawsAndRegulations: []
				}
			}
		},
		onLoad() {
			this.getRrecommendItems();
		},
		methods: {
			toDetail(items){
				uni.navigateTo({
					url: '/pages/matter/details?folderCode=' + items.code
				})
			},
			quickSearch() {
				uni.showLoading({
					title: '搜索中...',
					mask: true
				});
				this.$ajax({
					url: '/api/wwwNews/quickSearch',
					method: 'GET',
					needAuth: true,
					params: {
						keyWord: this.keyword
					}
				}).then(res => {
					if (res.code == 200) {
						this.list = res.data;
					}
				}).finally(()=>{
					uni.hideLoading();
				})
			},
			change() {
				this.getRrecommendItems();
			},
			recommend(itemCode) {
				uni.navigateTo({
					url: '/pages/matter/baseInfo?itemCode=' + itemCode
				})
			},
			cancel() {
				uni.navigateBack()
			},
			search: _throttle(function() {
				if (/^\s*$/.test(this.keyword)) {
					this.list = {
						byNewsToTitle: [],
						item: [],
						lawsAndRegulations: []
					}
				} else {
					this.quickSearch();
				}
			}, 10,true),
			getRrecommendItems() {
				this.$ajax({
					url: '/api/wwwNews/getRrecommendItems',
					method: 'GET',
					needAuth: true
				}).then(res => {
					if (res.code == 200) {
						this.recommendList = res.data;
					}
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.L-main {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		flex-direction: column;

		.search {
			background: #5498ff;
			padding: 16rpx 0;
			display: flex;
			align-items: center;
			justify-content: center;

			.search_box {
				display: flex;
				width: 590rpx;
				height: 64rpx;
				background-color: #ffffff;
				border-radius: 6rpx;
				align-items: center;
				padding: 0 30rpx;
				box-sizing: border-box;

				input {
					flex: 1;
					overflow: hidden;
					margin-left: 18rpx;
				}
			}

			.cancel {
				color: #FFFFFF;
				font-size: 32rpx;
				height: 64rpx;
				padding: 0 30rpx;
				line-height: 64rpx;
			}
		}

		.list {
			flex: 1;
			overflow: hidden;

			.list_box {

				.noData {
					display: flex;
					justify-content: center;
					align-items: center;
					padding-top: 30rpx;

					image {
						width: 408rpx;
						height: 319rpx;
					}
				}

				.recommend {
					padding: 0 30rpx;

					.title {
						padding: 30rpx 0;
						display: flex;
						justify-content: space-between;
						align-items: center;

						text {
							&:nth-child(1) {
								font-size: 36rpx;
								color: #333333;
								font-weight: 600;
							}

							&:nth-child(2) {
								color: #999999;
								font-size: 24rpx;
							}
						}
					}

					.recommend_list {
						view {
							background-color: #f5f9ff;
							border-radius: 6rpx;
							font-size: 24rpx;
							color: #999999;
							padding: 20rpx 16rpx;
							margin-bottom: 24rpx;
						}
					}
				}

				.text {
					font-size: 28rpx;
					color: #666666;
					padding: 24rpx 30rpx;
					border-bottom: 1rpx solid #f1f1f1;
				}
			}
		}
	}
</style>
